import 'package:flutter/material.dart';
import 'package:flutter_widget/custom/custom_appbar.dart';
import 'package:gesture_password_widget/gesture_password_widget.dart';

// ignore: must_be_immutable
class GesturePasswordWidgetPage extends StatefulWidget {
  String name;
  GesturePasswordWidgetPage({Key? key, required this.name}) : super(key: key);
  @override
  _GesturePasswordWidgetPage createState() => _GesturePasswordWidgetPage();
}

class _GesturePasswordWidgetPage extends State<GesturePasswordWidgetPage> {
  late String result = [0, 1, 4, 7, 8].join(','); //设定密码
  @override
  void initState() {
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: CustomAppbar(widget.name, Theme.of(context).primaryColor),
      body: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        crossAxisAlignment: CrossAxisAlignment.center,
        children: [
          GesturePasswordWidget(
            lineColor: Colors.blue,
            errorLineColor: Colors.redAccent,
            singleLineCount: 3,
            identifySize: 80.0,
            minLength: 3,
            hitShowMilliseconds: 40,
            errorItem: Container(
              width: 20.0,
              height: 20.0,
              decoration: BoxDecoration(
                color: Colors.red,
                borderRadius: BorderRadius.circular(50.0),
              ),
            ),
            normalItem: Container(
              width: 20.0,
              height: 20.0,
              decoration: BoxDecoration(
                color: Theme.of(context).primaryColor,
                borderRadius: BorderRadius.circular(50.0),
              ),
            ),
            selectedItem: Container(
              width: 25.0,
              height: 25.0,
              decoration: BoxDecoration(
                color: Colors.blue,
                borderRadius: BorderRadius.circular(50.0),
              ),
            ),
            hitItem: Container(
              width: 15.0,
              height: 15.0,
              decoration: BoxDecoration(
                color: Colors.white,
                borderRadius: BorderRadius.circular(50.0),
              ),
            ),
            answer: const [0, 1, 4, 7, 8],
            // color: Theme.of(context).primaryColor,
            onComplete: (data) {
              // ignore: avoid_print
              print(data);
              setState(
                () {
                  result = data.join(', ');
                },
              );
            },
          ),

          const SizedBox(
            height: 30,
          ),
          // ignore: unnecessary_string_interpolations
          Text('获取到的手势密码为: $result')
        ],
      ),
    );
  }
}
